import React, { Component } from 'react';
import styles from './SessionItem.scss';
import { observable, action, computed } from 'mobx';
import { observer } from 'mobx-react';

import initView from '@/cross/components/View';
const View = initView(styles);
import initText from '@/cross/components/Text';
const Text = initText(styles);
import initImage from '@/cross/components/Image';
const Image = initImage(styles);
import initScrollView from '@/cross/components/ScrollView';
const ScrollView = initScrollView(styles);
import initImageBackground from '@/cross/components/ImageBackground';
const ImageBackground = initImageBackground(styles);

// getTimeagoText
import { $src } from '@/cross/utils';
import { ISession } from '../../types';
import imStore from '../store/im';

interface SessionItemProps {
  session: ISession;
  index: number;
  onClick?: () => void;
  onLongPress?: () => void;
  onClickAvatar?: () => void;
}

@observer
class SessionItem extends Component<SessionItemProps> {
  render() {
    const { session, onClick, onClickAvatar } = this.props;
    return (
      <View
        activeOpacity={1}
        onClick={onClick}
        onLongPress={this.props.onLongPress}
        className="session-item M-flexbox-horizontal M-vertical-middle M-p-v-b-10 M-p-h-b-10 M-b-c-w"
      >
        <View className="session-item__avatar__view" onClick={onClickAvatar}>
          <ImageBackground
            className="session-item__avatar"
            src={
              session.avatar
                ? $src(session.avatar)
                : require('@/cross/assets/images/default_avatar.png')
            }
          />
          {!!session.unread && session.unread > 0 && (
            <View
              className={`session-item__badge M-center-all ${
                session.unread > 9 ? 'M-p-h-b-5' : ''
              }`}
            >
              <Text className="M-f-s-10 M-f-c-fff">{session.unread}</Text>
            </View>
          )}
        </View>
        <View className="M-flex-item M-m-l-10">
          <View className="M-flexbox-horizontal">
            <View className="M-flex-item">
              <Text numberOfLines={1} className="M-f-s-16">
                {session.name}
              </Text>
            </View>
            <View>
              <Text className="M-f-s-12 M-f-c-666">{session.updateTimeShow}</Text>
            </View>
          </View>
          <View className="M-flexbox-horizontal M-m-t-10 M-vertical-middle">
            <View className="M-flex-item">
              <Text className="M-f-s-12 M-f-c-666" numberOfLines={1}>
                {session.lastMsgShow}
              </Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

export default SessionItem;
